<template>
  <view class="m-collect" :class="[!visible ? 'hide-collect' : '']">
    <uni-transition mode-class="fade" :show="loading" class="loading" :duration="500">
      <u-loading-icon />
    </uni-transition>

    <!-- 类型1 -->
    <template v-if="title1">
      <view class="title">
        {{ title1 }}
      </view>
      <view class="box-1">
        <view v-for="item of title1Data" :key="item.prop">
          <text>{{ item.label }} :</text>
          <text class="ml5">
            {{ item.value }}
          </text>
        </view>
      </view>
    </template>

    <!-- 类型2数据 -->
    <template v-if="useData2">
      <template v-if="title2Data.length">
        <view v-for="item in title2Data" :key="item.title">
          <view class="title">
            {{ item.title }}
          </view>
          <template v-if="item.children.length">
            <view v-for="(son, index) of item.children" :key="index" class="box">
              <view>
                <text>{{ son.label }} : </text>
                <text class="m-l-5">
                  {{ son.value }}
                </text>
              </view>
            </view>
          </template>
          <view v-else class="no-data"> 暂无数据 </view>
        </view>
      </template>
      <view v-else class="no-data"> 暂无数据 </view>
    </template>
  </view>
</template>
<script setup lang="ts" name="">
export interface CollectDataProps<T = number> {
  value?: T;
  label: number | string;
  prop?: string;
}

export interface CollectData2Props {
  title: string;
  children: CollectDataProps[];
}

export interface MCollect {
  visible: boolean;
  loading?: boolean;
  useData2?: boolean;
  title1?: string;
  title1Data?: CollectDataProps[];
  title2Data?: CollectData2Props[];
}

// 接受父组件参数，配置默认值
withDefaults(defineProps<MCollect>(), {
  visible: false,
  loading: false,
  useData2: false,
  title1Data: () => [],
  title2Data: () => []
});
</script>
<style lang="scss" scoped src="./index.scss"></style>
